<template>
  <dv-border-box-13>

    <div class="hezi">
        <div class="header" >
            <img src="../../assets/img/titles/zuo.png" alt="">
            <span style="color: aqua;">设备总览</span>
            <img src="../../assets/img/titles/you.png" alt="">

        </div>
        <div class="body" style="">

            <div class=" zong" style=" color:  #00fdfa">
                {{ online + offline }}
                <div class="name">设备总数 </div>
            </div>


            <div class="zai" style=" color:  #07f7a8">
                {{ online }}
                <div class="name">在线数量 </div>
            </div>
            <div class="bao" style=" color:  #f59b11">
                {{ online }}
                <div class="name">报警次数 </div>
            </div>

            <div class=" li" style=" color:  #f5023d">
                {{ offline }}
                <div class="name">离线数量 </div>
            </div>



        </div>
    </div>
  </dv-border-box-13>
    
</template>
    
<script>
export default {
    props: {
        online: Number,//在线
        offline: Number,//离线
        alarms:Number//报警
    },
    watch: {

    }
}
</script>
    
<style scoped  lang="scss">
.hezi {
    width: 100%;
    height: 100%;
    position: relative;

}

.header {
    width: 100%;
    height: 10%;
    text-align: center;
    padding-top: 10px;
    font-size: 16px;
}

.body {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    padding-left: 20px; /* 左边距离 */
    padding-right: 20px; /* 右边距离 */
}

.zong {
    background: url(../../assets/img/left_top_lan.png) no-repeat top center;
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    flex-direction: column;
    /* 子元素垂直排列 */
}

.zai {
    background: url(../../assets/img/left_top_lv.png) no-repeat top center;
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    flex-direction: column;
    /* 子元素垂直排列 */
}
.bao {
    background: url(../../assets/img/left_top_huang.png) no-repeat top center;
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    flex-direction: column;
    /* 子元素垂直排列 */
}
.li {
    background: url(../../assets/img/left_top_hong.png) no-repeat top center;
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    flex-direction: column;
    /* 子元素垂直排列 */
}
.zong, .zai, .bao, .li {

    /* 添加以下background-size属性以调整背景图片大小 */
    background-size: contain; /* 保持图片比例并适应容器 */
}

.name {
    position: absolute;
    bottom: -30%;
    left: 18%;
    font-size: 13px;

}
</style>